// 项目的根组件，一切组件的根基
// App被引入到了index.js,渲染到public/index.html文件中id为root的div

import { createContext, useContext, useState } from "react"

// 跨层传递数据
// App -> A -> B
// 把App的msg数据传递到B
// 1. 使用createContext方法创建一个上下文对象
const MsgContext = createContext()
// 2. 在顶层组件，通过Provider组件提供数据

// 3. 在底层组件，通过useContext钩子函数使用数据

function App16() {
  const msg = 'this is App msg'
  return (
    <div className="App">
      <MsgContext.Provider value={msg}>
        this is App 
        <A />
      </MsgContext.Provider>
    </div>
  );
}

function A({onGetAname}) {
  return (
    <div>
       this is A component
      <B/>
    </div>
  )
}

function B({name}) {
  const msg = useContext(MsgContext)
  return (
    <div>
      this is B component, {msg}
      
    </div>
  )
}

export default App16
